<template>
	<view>
		<view class="content">
			<view class="list">
				<view class="row" @click="portraitClick">
					<view class="title">{{i18n.headPortrait}}</view>
					<view class="right">
						<view class="tis"><image :src="user.face" mode="widthFix"></image></view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row">
					<view class="title">{{i18n.account}}</view>
					<view class="right">
						<view class="tis">{{ user.id }}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
				<view class="row" @click="editUserName">
					<view class="title">{{i18n.nickName}}</view>
					<view class="right">
						<view class="tis">{{ user.username }}</view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
			<view class="list" @click="goAddress">
				<view class="row">
					<view class="title">{{i18n.address}}</view>
					<view class="right">
						<view class="tis"></view>
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="quit" @click="quitClick">{{i18n.signOut}}</view>
		<!-- 修改昵称弹框 -->
		<view v-if="editDialog" class="coverBox"></view>
		<view v-if="editDialog" class="editBox">
			<view class="title">{{i18n.fillInName}}</view>
			<input type="text" :focus="editDialog" v-model="editName"  class="inputBox" />
			<view class="footer">
				<view class="" @click="cancelDialog">{i18n.cancel}}</view>
				<view class="confirm" @click="confirmDialog">{i18n.determine}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		i18n() {
			// 倒入你需要的对象
			return this.$t('setting')
		}
	},
	data() {
		return {
			lang: 'zh-CN',
			editDialog: false,
			editName: '',
			user: {
				face: '/static/img/face.jpg',
				username: '马化腾',
				id: '31241243141',
				signature:'个人介绍：账号ID',
				integral:0,
				balance:0,
				envelope:0
			}
		};
	},
	methods: {
		getLanguage(){
			var that=this;
			console.log(that.$i18n.locale)
			if (that.$i18n.locale === 'zh-CN') {
				uni.setNavigationBarTitle({
				    title: '我的设置'
				});
			} else if (that.$i18n.locale === 'en-US') {
				uni.setNavigationBarTitle({
				    title: 'My settings'
				});
			}
		},
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			this.list = this.orderList[tbIndex];
		},
		// 头像上传
		portraitClick() {
			var _self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					const tempFilePaths = res.tempFilePaths;
					const uploadTask = uni.uploadFile({
						url: 'https://demo.hcoder.net/index.php?c=uperTest',
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							user: 'test'
						},
						success: function(uploadFileRes) {
							console.log(uploadFileRes);
							// _self.img = uploadFileRes.data
						}
					});

					uploadTask.onProgressUpdate(function(res) {
						_self.percent = res.progress;
						console.log('上传进度' + res.progress);
						console.log('已经上传的数据长度' + res.totalBytesSent);
						console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					});
				},
				error: function(e) {
					console.log(e);
				}
			});
		},
		// 显示更改昵称弹框
		editUserName() {
			this.editName = this.user.username;
			this.editDialog = true;
		},
		cancelDialog() {
			this.editDialog = false;
		},
		confirmDialog() {
			this.user.username = this.editName;
			this.editDialog = false;
		},
		goAddress() {
			uni.navigateTo({
				url: '/pages/user/address/address'
			});
		},
		quitClick() {
			uni.showModal({
				title: '注销登陆',
				content: '是否注销当前登陆',
				success(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						uni.navigateTo({
							url: '../../login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	},
	onShow(){
		uni.getStorage({
			key: 'UserInfo',
			success: (res)=>{
				if(!res.data){
					if(this.isfirst){
						//this.toLogin();
					}
					return ;
				}
				this.user = res.data;
			},
			fail:(e)=>{
				//this.toLogin(); 
			}
		});
	},
	onLoad: function() {
		this.getLanguage();
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}

.icon {
	font-size: 30upx;
}
.content {
	padding-bottom: 20upx;
	.list {
		width: 96%;
		padding-left: 4%;
		background-color: #fff;
		margin-bottom: 20upx;
		.row {
			widows: 100%;
			min-height: 90upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1upx #eee;
			&:last-child {
				border-bottom: none;
			}
			.title {
				font-size: 32upx;
				color: #333;
			}
			.right {
				display: flex;
				align-items: center;
				color: #999;
				.tis {
					font-size: 26upx;
					margin-right: 5upx;
					max-height: 120upx;
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 100%;
						margin: 10upx 0;
					}
				}
				.icon {
					width: 40upx;
					color: #cecece;
				}
			}
		}
	}
}
.quit {
	position: fixed;
	left: 50upx;
	right: 50upx;
	bottom: 50upx;
	line-height: 80upx;
	height: 80upx;
	border: 1upx solid #8b6945;
	border-radius: 10upx;
	text-align: center;
	color: #8b6945;
	font-size: 30upx;
}
.coverBox {
	background: rgba($color: #000000, $alpha: 0.6);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.editBox {
	position: absolute;
	bottom: 10upx;
	left: 10upx;
	right: 10upx;
	background-color: #ffffff;
	z-index: 2;
	height: 300upx;
	border-radius: 10upx;
	overflow: hidden;
	.title {
		font-size: 36upx;
		padding: 20upx 0;
		text-align: center;
	}
	.inputBox {
		margin: 20upx;
		border: 1upx solid #eee;
		padding: 10upx;
	}
	.footer {
		background-color: #f8f9fa;
		border-top: 1upx solid #cfcfcf;
		display: flex;
		margin-top: 40upx;
		view {
			flex: 1;
			text-align: center;
			height: 80upx;
			line-height: 80upx;
		}
		.confirm {
			color: #8b6945;
			border-left: 1upx solid #cfcfcf;
		}
	}
}
</style>
